<template>
  <el-card shadow="always">
    <el-row :gutter="20">
      <el-col :span="12">
        <span class="left-toolbarClass">
          {{ listName }}排行榜
        </span>
      </el-col>
      <el-col :span="6" :offset="6">
        <span class="right-toolbarClass">
          <div class="button-wrapper">
            <el-button class="button-class" :class="{ active: activeBtn === 'yesterday' }" @click="handleButton('yesterday')">
              昨日
            </el-button>
            <el-button class="button-class" :class="{ active: activeBtn === 'today' }" @click="handleButton('today')">
              今日
            </el-button>
          </div>
        </span>
      </el-col>
    </el-row>

    <el-table v-loading="loading" :data="listData" class="table-container">
      <el-table-column label="排名" width="80" align="center" class="table-rankNo">
        <template slot-scope="scope">
          <span v-if="scope.row.rankNo === 1">
            <svg-icon icon-class="ranking-list-fill-1" style="width: 30px; height: 30px" />
          </span>
          <span v-else-if="scope.row.rankNo === 2">
            <svg-icon icon-class="ranking-list-fill-2" style="width: 30px; height: 30px" />
          </span>
          <span v-else-if="scope.row.rankNo === 3">
            <svg-icon icon-class="ranking-list-fill-3" style="width: 30px; height: 30px" />
          </span>
          <span v-else style="font-weight: bold;">
            {{ scope.row.rankNo }}
          </span>
        </template>
      </el-table-column>
      <el-table-column label="爬虫名称" align="left" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          {{ scope.row.codeName }}
        </template>
      </el-table-column>
      <el-table-column :label="listName" width="100" align="center">
        <template slot-scope="scope">
          {{ scope.row.countNum }}条
        </template>
      </el-table-column>
    </el-table>
  </el-card>
</template>

<script>

export default {
  props: {
    listName: {
      type: String,
      default: ''
    },
    listData: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      list: this.listData,
      activeBtn: 'today',
      loading: true
    }
  },
  mounted() {
    setTimeout(() => {
      this.loading = false
    }, 300)
  },

  created() {

  },
  methods: {
    handleButton(type) {
      this.loading = true
      setTimeout(() => {
        this.loading = false
      }, 300)
      this.activeBtn = type // 把当前点击的按钮设置为选中状态
      if (this.listName === '爬取数量') {
        this.$emit('rank-button-click', 'count', type)
      } else {
        this.$emit('rank-button-click', 'error', type)
      }
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  .table-container {
    border-bottom: none;
    width: 100%;
    padding-top: 15px;
    font-size: 15px;
  }
</style>
<style>
  .el-table .el-table__row>td {
    border: none;
  }

  .left-toolbarClass {
    font-weight: bold;
    font-size: 18px;
    color: #525151;
  }
  .right-toolbarClass {
    float: right;
  }

  .button-wrapper {
    display: flex;
    justify-content: center;
  }

  .button-class {
    width: 58px;
    height: 28px;
    background-color: #c7c7c7;
    padding: 0;
    margin: -5px;
    margin-bottom: 0;
    color: white;
    font-size: 14px;
    text-align: center;
    border: none;
    border-radius: 15px;
    cursor: pointer;
  }

  .button-class.active {
    background-color: rgba(95, 167, 243, 0.95);
    color: white;
  }

  .button-class:not(.active):hover {
    background-color: #eeeeee;
  }

</style>
